<template>
  <WebSiteMenu
    :menu-data="menuData"
    :menu-style="{ width: '870px' }"
    :hover-color="hoverColor"
    @handle-menu="handleMenu"
  />
</template>

<script setup>
import { defineComponent } from 'vue'
import WebSiteMenu from '../common/WebsiteMenu.vue'

defineComponent({
	name: 'PublicWebsiteMenu'
})
const props = defineProps({
	href1: {
		type: String,
		default: '#'
	},
	href2: {
		type: String,
		default: '#'
	},
	href3: {
		type: String,
		default: '#'
	},
	href4: {
		type: String,
		default: '#'
	},
	href5: {
		type: String,
		default: '#'
	},
	hoverColor: {
		type: String,
		default: '#cd3e2d'
	}
})
const emits = defineEmits(['handleMenu']);

const menuData = [
	{ menuName: 'website_menu.menu1', menuHref: props.href1 },
	{ menuName: 'website_menu.menu2', menuHref: props.href2 },
	{ menuName: 'website_menu.menu3', menuHref: props.href3 },
	{ menuName: 'website_menu.menu4', menuHref: props.href4 },
	{ menuName: 'website_menu.menu5', menuHref: props.href5 }
]

const handleMenu = (item)=>{
  emits('handleMenu',item);
}
</script>

<style scoped lang="scss"></style>
